<template>
	<div id="feedback">
		<p class="Title">意见反馈</p>
		<div v-show="isshow == 1" class="feedback_1">
			<ul class="feedback_title">
				<li @click="feedback = 1" :class="feedback == 1?'feedback_active':''">意见反馈</li>
				<span>|</span>
				<li @click="feedback = 2" :class="feedback == 2?'feedback_active':''">反馈列表</li>
			</ul>
			<!--------意见反馈----------->
			<div v-show="feedback == 1" class="feedback_form">
				<div class="feedback_type">
					<p>反馈类型：</p>
					<ul>
						<li @click="suggestedType = 1" :class="suggestedType == 1?'type_active':''">
							<p>意见反馈</p>
							<img v-show="suggestedType == 1" src="../../static/img/recharge-02.png"/>
						</li>
						<li @click="suggestedType = 2" :class="suggestedType == 2?'type_active':''">
							<p>功能建议</p>
							<img v-show="suggestedType == 2" src="../../static/img/recharge-02.png"/>
						</li>
					</ul>
				</div>
				<div class="feedback_content">
					<p>反馈内容：</p>
					<div class="textarea">
						<textarea placeholder="请输入您的问题" maxlength="100" v-model="content"></textarea>
						<p><span>{{content.length}}</span>/100</p>
					</div>
				</div>
				<input id="sub" type="button" value="提交" @click="submitfb" />
			</div>
			<!---------反馈列表------------>
			<div v-show="feedback == 2" class="feedback_list">
				<div class="list_title">
					<p>反馈类型</p>
					<p>反馈内容</p>
					<p>反馈时间</p>
					<p>回复状态</p>
					<p>操作</p>
				</div>
				<div v-if="feedbackList.length>0" v-for="(item,key) in feedbackList" class="list_item">
					<p>{{item.suggestedType == 1?'意见反馈':'功能建议'}}<!--<span class="isRead" v-show="item.status == 1"></span>--></p>
					<p>{{item.content}}</p>
					<p>{{getDate(item.createtime)}}</p>
					<p>{{item.status == 1?'已回复':'未回复'}}</p>
					<p><input @click="isshow = 2,index = key" type="button" value="查看详情" /></p>
				</div>
				<el-pagination
				 v-if="feedbackList.length>0"
				background
			    @current-change="handleCurrentChange"
			    :current-page.sync="currentPage"
			    :page-size="pageSize"
			    :pager-count="5"
			    layout="prev, pager, next, jumper"
			    :total="total">
				</el-pagination>
				<!----------没有数据了------------>
				<div v-else class="noData">
					<img src="../../static/img/nodata.png"/>
				</div>
				<!--------一键已读------------->
				<!--<input  v-if="feedbackList.length>0" @click="beRead" type="button" id="beRead" value="一键已读" />-->
			</div>
		</div>
		<div v-if="feedbackList.length>0" v-show="isshow == 2" class="feedback_detail">
			<input @click="isshow = 1" type="button" class="return" value="返回列表" />
			<p class="detail_title">反馈详情</p>
			<p class="detail_time">{{getDate(feedbackList[index].createtime)}}</p>
			<p class="detail_content">{{feedbackList[index].content}}</p>
			<p class="detail_answer">官方回复：{{feedbackList[index].remark}}</p>
		</div>
	</div>
</template>

<script>
export default{
	name:'feedback',
	data:function(){
		return{
			feedback: 1,//1 意见反馈  2 反馈列表
			suggestedType: 1,//反馈类型  
			content: '',//反馈内容
			isshow: 1,//1 反馈列表 2 反馈详情
			index: 0,//反馈序号
			total: 0,//总条数
			pageSize: 10,//每页条数
			currentPage: 1,//当前页码
			feedbackList:[
//				{
//					suggestedType: 1,//反馈类型
//					content: '反馈内容反馈内容反馈内容反馈内容',//反馈内容
//					createtime: 1514779200000,//反馈时间
//					status: 1,//回复状态
//					remark: '已经解决',//官方回复
//					isRead: 0,//已读未读
//				},
			]
		}
	},
	methods:{
		showAdvice: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
	        	startPage:_this.currentPage,
	        	pageSize:_this.pageSize
	        })
			_this.$axios.post('/agent/advice/show',postData).then(function(res){
				var data = res.data;
				if(data.message=="succ"){
					_this.feedbackList = data.result.list;
					_this.total = data.result.total;
				}else{
					_this.$alert("2",data.result);
				}
			}).catch(function (error) {
			    console.log(error);
			});
		},
		//-----------分页页码改变------------
	    handleCurrentChange:function(val) {
	    	this.currentPage=val;
	        this.showAdvice()
	    },
		submitfb: function(){
			var _this = this;
			if(_this.content==''){
				_this.$alert("2","反馈内容不能为空");
				return;
			}
			var postData = _this.$qs.stringify({
				suggestedType: _this.suggestedType,
				content: _this.content
			});
			_this.$axios.post("/agent/advice/addAdvice", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.$alert("1","提交成功，感谢您的反馈",function(){
						_this.showAdvice();
						_this.feedback=2;
					});
				}else{
					alert(data.result);
				}
			})
			.catch(function(error){
				console.log(error)
			});
		},
		//-------一键已读--------
//		beRead:function(){
//			var _this = this;
//			$.each(this.feedbackList, function(i) {
//				_this.feedbackList[i].status = 2;
//			});
//			_this.$axios.post('/agent/advice/readAll').then((res) => {
//				var data = res.data;
//			});
//		},
		//--------日期转换-----------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oHour = oDate.getHours(),  
		    oMin = oDate.getMinutes(),  
		    oSen = oDate.getSeconds(),  
		    oTime = oYear +'-'+ this.getzf(oMonth) +'-'+ this.getzf(oDay) +' '+ this.getzf(oHour) +':'+ this.getzf(oMin) +':'+this.getzf(oSen);//最后拼接时间  
		    return oTime;  
		},
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		}
	},
	created:function(){
		this.showAdvice();
	}
	
}
</script>


<style>
/*-----------分页器样式------------*/
.el-pagination{
	text-align: center;
	margin-top: 20px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
	background-color: #FF464E;
}
.el-pagination.is-background .el-pager li:not(.active):hover{
	color: #FF464E;
}
</style>
<style scoped>
#feedback{
	width: 1030px;
	background-color: #fff;
	padding: 30px;
	padding-bottom: 10px;
	box-sizing: border-box;
}
.Title{
	font-size: 20px;
	color: #545454;
}
/*--------意见反馈/反馈列表-------*/
.feedback_title{
	display: flex;
	align-items: center;
	border-bottom: 1px solid #e6e6e6;
	margin-top: 5px;
}
.feedback_title li{
	width: 100px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	margin-bottom: -1px;
	border-bottom: 1px solid transparent;
}
.feedback_title span{
	color: #E6E6E6;
}
.feedback_title li.feedback_active{
	border-bottom: 1px solid #FF464E;
	color: #FF464E;
}
/*--------意见反馈表单------------*/
.feedback_form{
	padding: 30px 20px;
}
.feedback_type{
	display: flex;
	align-items: center;
}
.feedback_type p{
	color: #545454;
}
.feedback_type ul{
	display: flex;
}
.feedback_type ul li{
	width: 120px;
	height: 30px;
	border: 1px solid #E6E6E6;
	color: #545454;
	margin-right: 15px;
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.feedback_type ul li img{
	position: absolute;
	height: 15px;
	display: block;
	bottom: 0;
	right: 0;
}
.feedback_type ul li.type_active{
	border: 1px solid #FF464E;
	color: #FF464E;
}
.feedback_content{
	display: flex;
	margin-top: 20px;
}
.feedback_content>p{
	height: 30px;
	line-height: 30px;
	color: #545454;
}
.feedback_content .textarea{
	width: 600px;
	height: 150px;
	position: relative;
}
.feedback_content .textarea textarea{
	width: 100%;
	height: 100%;
	border: 1px solid #E6E6E6;
	padding: 10px;
	box-sizing: border-box;
	font-size: 14px;
	resize: none;
}
.feedback_content .textarea p{
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: #808080;
}
#sub{
	background-color: #FF464E;
	color: #FFFFFF;
	width: 120px;
	height: 30px;
	border: none;
	margin-left: 70px;
	margin-top: 30px;
}
/*--------反馈列表--------------*/
.feedback_list{
	margin-top: 20px;
	position: relative;
}
.list_title{
	background-color: #F5F5F5;
	height: 30px;
	display: flex;
	align-items: center;
}
.list_title p{
	width: 18%;
	text-align: center;
}
.list_title p:nth-child(2){
	width: 28%;
}
.list_item{
	display: flex;
	align-items: center;
	height: 40px;
	border-bottom: 1px solid #E6E6E6;
}
.list_item p{
	width: 18%;
	text-align: center;
	color: #808080;
}
.isRead{
	width: 10px;
	height: 10px;
	background-color: #FF464E;
	border-radius: 50%;
	display: inline-block;
	margin-left: 10px;
}
.list_item p:nth-child(2){
	width: 28%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.list_item input{
	width: 100px;
	height: 25px;
	background-color: #FF464E;
	color: #FFFFFF;
	border: none;
}
/*-----------反馈详情-------------*/
.feedback_detail{
	margin-top: 20px;
}
.return{
	width: 100px;
	height: 25px;
	background-color: #fff;
	border: 1px solid #FF464E;
	color: #FF464E;
	box-sizing: border-box;
	cursor: pointer;
}
.detail_title{
	font-size: 18px;
	font-weight: 600;
	color: #545454;
	text-align: center;
	padding-top: 30px;
	border-top: 1px solid #E6E6E6;
	margin-top: 10px;
}
.detail_time{
	color: #808080;
	text-align: center;
	margin-top: 10px;
}
.detail_content{
	width: 600px;
	margin: 0 auto;
	margin-top: 30px;
	color: #808080;
}
.detail_answer{
	width: 600px;
	margin: 0 auto;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #E6E6E6;
	color: #808080;
}
/*-------没数据了----------*/
.noData img{
	width: 30%;
	display: block;
	margin: 0 auto;
	margin-top: 50px;
}
/*------一键已读---------*/
#beRead{
	position: absolute;
	bottom: 0;
	right: 20px;
	border: 1px solid #FF464E;
	background-color: #fff;
	color: #FF464E;
	width: 120px;
	height: 30px;
}
</style>
